<div id="main" class="schedulerMain container-fluid">
	<div class="d-flex align-items-center">
		<nav aria-label="breadcrumb">
			<ol id="playbookBreadcrumbs" class="breadcrumb">
				<li class="breadcrumb-item">Scheduler</li>
			</ol>
		</nav>
	</div>

	<div class="row align-items-center mb-3">
		<div class="col-auto">
			<button (click)="addScheduledTask()" class="btn btn-outline-primary"><i class="fa fa-plus"></i> Add To
				Schedule</button>
		</div>

		<div class="col">
			<div class="row">
				<h4 class="my-auto mr-2">Scheduler <span id="status" class="text-capitalize">{{schedulerStatus}}</span>
				</h4>

				<button *ngIf="schedulerStatus && schedulerStatus !== 'running'"
					(click)="changeSchedulerStatus('start')" class="btn btn-primary mx-1" id="startSchedulerBtn"
					ngbTooltip="Start Scheduler">
					<i class="fa fa-play"></i>
				</button>
				<!-- <button *ngIf="schedulerStatus && schedulerStatus === 'running'"
					(click)="changeSchedulerStatus('pause')" class="btn btn-warning mx-1" id="pauseSchedulerBtn"
					ngbTooltip="Pause Scheduler">
					<i class="fa fa-pause"></i>
				</button> -->
				<button *ngIf="schedulerStatus && schedulerStatus === 'running'" (click)="changeSchedulerStatus('stop')"
					class="btn btn-danger" id="stopSchedulerBtn" ngbTooltip="Stop Scheduler">
					<i class="fa fa-stop"></i>
				</button>
			</div>
		</div>

		<div class="col-4">
			<input class="form-control" placeholder="Filter Results..." [formControl]="filterQuery" />
		</div>
	</div>

	<ngx-datatable #scheduleTable class='material expandable scheduledTasksTable' [columnMode]="'flex'"
		[rows]="displayScheduledTasks" [sorts]="[{prop: 'name', dir: 'asc'}]" [sortType]="'multi'" [headerHeight]="50"
		[footerHeight]="50" [rowHeight]="undefined" [limit]="25">
		<!-- Column Templates -->
		<ngx-datatable-column name="Name" prop="name" [flexGrow]="2">
			<ng-template let-row="row" ngx-datatable-cell-template>
				<span title="{{row.description}}">{{row.name}}</span>
			</ng-template>
		</ngx-datatable-column>
		<ngx-datatable-column name="Workflow(s)" [flexGrow]="3" [sortable]="false">
			<ng-template let-row="row" ngx-datatable-cell-template>
				{{getFriendlyWorkflows(row)}}
			</ng-template>
		</ngx-datatable-column>
		<ngx-datatable-column name="Status" prop="status" [flexGrow]="1"></ngx-datatable-column>
		<ngx-datatable-column name="Type" prop="task_trigger.type" [flexGrow]="1"></ngx-datatable-column>
		<ngx-datatable-column name="Rule" [sortable]="false" [flexGrow]="4">
			<ng-template let-row="row" ngx-datatable-cell-template>
				{{getRule(row)}}
			</ng-template>
		</ngx-datatable-column>
		<ngx-datatable-column name="Actions" [resizeable]="false" [sortable]="false" [draggable]="false" [flexGrow]="2">
			<ng-template let-row="row" ngx-datatable-cell-template>
				<!-- <button *ngIf="row.status === 'stopped' || row.status === 'paused'"
					(click)="changeScheduledTaskStatus(row, 'start')" title="Start Scheduled Task"
					class="mr-1 btn btn-primary">
					<i class="fa fa-play"></i>
				</button>
				<button *ngIf="row.status === 'running''" (click)="changeScheduledTaskStatus(row, 'pause')" title="Pause Scheduled Task"
					class="btn btn-warning">
					<i class="fa fa-pause"></i>
				</button>
				<button *ngIf="row.status === 'running' || row.status === 'paused'"
					(click)="changeScheduledTaskStatus(row, 'stop')" title="Stop Scheduled Task"
					class="mr-1 btn btn-danger">
					<i class="fa fa-stop"></i>
				</button> -->
				<button (click)="editScheduledTask(row)" class="mr-1 btn btn-primary" title="Edit Scheduled Task">
					<i class="fa fa-edit"></i>
				</button>
				<button (click)="deleteScheduledTask(row)" class="mr-1 btn btn-danger" title="Delete Scheduled Task">
					<i class="fa fa-times"></i>
				</button>
			</ng-template>
		</ngx-datatable-column>
	</ngx-datatable>
</div>